<template>
  <div class="wraper">
    <div class="tools">
      <el-button type="primary" @click="printData">打印数据</el-button>
    </div>
    <div class="stencil-container" id="stencil-container"></div>
    <div class="container" id="container">


    </div>
    <div id="minimap"></div>
    <TeleportContainer />
  </div>
  <el-dialog v-model="dialogVisible" title="Tips" width="30%" :before-close="handleClose">
    test
  </el-dialog>
</template>

<script>
let graph = null
import { Graph } from '@antv/x6'
import { Snapline } from '@antv/x6-plugin-snapline'
import { Clipboard } from '@antv/x6-plugin-clipboard'
import { Selection } from '@antv/x6-plugin-selection'
import { Keyboard } from '@antv/x6-plugin-keyboard'
import { MiniMap } from '@antv/x6-plugin-minimap'
import { Stencil } from '@antv/x6-plugin-stencil'
import { Transform } from '@antv/x6-plugin-transform'
import { register, getTeleport } from '@antv/x6-vue-shape'
import MqttInput from './mqtt-input.vue'
import TimeWindow from './time-window.vue'

register({
  shape: 'timeWindow',
  x:130,
  y:30, 
  width: 140,
  height: 36,
  scalable: true,
  component: TimeWindow,
  ports: {
    groups: {
      left: {
        position: 'left',
        attrs: {
          circle: {
            magnet: true,
            stroke: '#8f8f8f',
            r: 5,
          },
        },
      },
      right: {
        position: 'right',
        attrs: {
          circle: {
            magnet: true,
            stroke: '#8f8f8f',
            r: 5,
          },
        },
      },
    },
  }
})
register({
  shape: 'mqttInput',
  width: 140,
  height: 36,
  component: MqttInput,
  ports: {
    groups: {
      right: {
        position: 'right',
        attrs: {
          circle: {
            magnet: true,
            stroke: '#8f8f8f',
            r: 5,
          },
        },
      },
    },
  }
})
const TeleportContainer = getTeleport()
export default {

  name: 'HelloWorld',
  components: {
    TeleportContainer
  },
  props: {
    msg: String
  },
  data() {
    return {
      dialogVisible: false,
      nodes: [
        {
          id: 'node1',
          shape: 'rect',
          x: 40,
          y: 40,
          width: 100,
          height: 40,
          label: 'hello',
          attrs: {
            // body 是选择器名称，选中的是 rect 元素
            body: {
              stroke: '#8f8f8f',
              strokeWidth: 1,
              fill: '#fff',
              rx: 6,
              ry: 6,
            },
          },
        },
        {
          id: 'node2',
          shape: 'rect',
          x: 160,
          y: 180,
          width: 100,
          height: 40,
          label: 'world',
          attrs: {
            body: {
              stroke: '#8f8f8f',
              strokeWidth: 1,
              fill: '#fff',
              rx: 6,
              ry: 6,
            },
          },
        },
      ],
      edges: [
        {
          shape: 'edge',
          source: 'node1',
          target: 'node2',
          label: 'x6',
          attrs: {
            // line 是选择器名称，选中的边的 path 元素
            line: {
              stroke: '#8f8f8f',
              strokeWidth: 1,
            },
          },
        },
      ]
    }
  },
  methods: {
    printData() {
      console.log(graph.toJSON())

    },
    handleClose(done) {
      done()
    }
  },
  mounted() {
    graph = new Graph({
      container: document.getElementById('container'),
      panning: true,// 是否启用平移
      mousewheel: true,// 是否启用鼠标滚轮缩放
      background: {
        color: '#F2F7FA',
      },
      grid: {
        visible: true,
        type: 'doubleMesh',
        args: [
          {
            color: '#eee', // 主网格线颜色
            thickness: 1, // 主网格线宽度
          },
          {
            color: '#ddd', // 次网格线颜色
            thickness: 1, // 次网格线宽度
            factor: 4, // 主次网格线间隔
          },
        ],
      },
    })
    // graph.fromJSON(this.nodes) // 渲染元素
    graph.centerContent() // 居中显示
    graph.use(
      new Snapline({
        enabled: true,
      }),
    )
    graph.use(
      new Selection({
        enabled: true,
        showNodeSelectionBox: true,
      }),
    )
    graph.use(
      new Clipboard({
        enabled: true,
      }),
    )
    graph.use(
      new Keyboard({
        enabled: true,
        global: true,
      }),
    )
      .use(
        new Transform({
          resizing: true,
          rotating: true,
        }),
      )
    graph.bindKey('ctrl+c', () => {
      const cells = graph.getSelectedCells()
      if (cells.length) {
        graph.copy(cells)
      }
      return false
    })
    graph.bindKey('ctrl+v', () => {
      if (!graph.isClipboardEmpty()) {
        const cells = graph.paste({ offset: 32 })
        graph.cleanSelection()
        graph.select(cells)
      }
      return false
    })



    graph.use(
      new MiniMap({
        container: document.getElementById('minimap'),
      }),
    )
    const stencil = new Stencil({
      target: graph,
      search(cell, keyword) {
        return cell.shape.indexOf(keyword) !== -1
      },
      placeholder: 'Search by shape name',
      notFoundText: 'Not Found',
      collapsable: true,
      stencilGraphHeight: 0,
      groups: [
        {
          name: 'group1',
          title: 'Group(Collapsable)',
        },
        {
          name: 'group2',
          title: 'Group',
          collapsable: false,
        },
      ],
      // layout: 'grid',
      layoutOptions: {
        columns: 1,
        columnWidth: 'auto',
        rowHeight: 'auto',
        dx: 10,
        dy: 10,
        marginX: 0,
        marginY: 0,
        center: true, // 确保节点居中
        resizeToFit: false
      },
    })
    const n1 = graph.createNode({
      shape: 'timeWindow',

      ports: {
        items: [
          {
            id: 'port_1',
            group: 'left',
          },
          {
            id: 'port_2',
            group: 'right',
          },
        ],
      },
    })
    
    const n2 = graph.createNode({
      shape: 'mqttInput',
      ports: {
        items: [
          {
            id: 'port_1',
            group: 'right',
          },

        ],
      },

    })
    const n3 = graph.createNode({
      shape: 'mqttInput',
      ports: {
        items: [
          {
            id: 'port_1',
            group: 'right',
          },

        ],
      },

    })
    // const n3 = graph.createNode({
    //   shape: 'custom-image',
    // })
    stencil.load([n1,n3], 'group1')
    stencil.load([n2], 'group2')
    document.getElementById('stencil-container').appendChild(stencil.container)
    graph.on('node:dblclick', (e, x, y, node, view) => {
      console.log(e, x, y, node, view)
      this.dialogVisible = true
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.wraper {
  display: flex;
  width: 100%;
  height: 100%;
}

.tools {

  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 1000;
  display: flex;
}

.stencil-container {
  width: 200px;
  height: 100%;
  border: 1px solid #ccc;
  position: relative;
}

.container {
  flex: 1;
  height: 100%;
  border: 1px solid #ccc;
}

#minimap {
  position: fixed;
  bottom: 10px;
  right: 100px;
  width: 160px;
  height: 160px;
}
</style>
